/**
 * Created by fanweihua on 2016/12/5.
 */
import React from 'react';
import SearchBarHtml from './searchBarHtml.js';

const SearchBar = React.createClass({
    getInitialState: function () {
        return {
            html: SearchBarHtml.html,
            javaScriptHtml: SearchBarHtml.javaScriptHtml,
        };
    },
    render(){
        return (
            <div className="Z_slideIn">
                <div className="page slideIn">
                    <div className="Z_content_code">
                        <div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
                        <div dangerouslySetInnerHTML={{__html: this.state.javaScriptHtml}}></div>
                    </div>
                </div>
                <div className="Z_content">
                    <div className="Z_panel-body-backgound">
                        <SearchBarNav></SearchBarNav>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = SearchBar;
const SearchBarNav = React.createClass({
    componentDidMount: function () {
        SearchBarHtml._go();
    },
    render(){
        return (
            <div className="Z_panel-body">
                <div className="page__hd">
                    <h1 className="page__title">SearchBar</h1>
                    <p className="page__desc">搜索栏</p>
                </div>
                <div className="page__bd">
                    <div className="weui-search-bar" id="searchBar">
                        <form className="weui-search-bar__form">
                            <div className="weui-search-bar__box">
                                <i className="weui-icon-search"></i>
                                <input type="search" className="weui-search-bar__input" id="searchInput"
                                       placeholder="搜索"
                                       required=""></input>
                                <a href="javascript:" className="weui-icon-clear" id="searchClear"></a>
                            </div>
                            <label className="weui-search-bar__label" id="searchText"
                                   style={{transformOrigin: "0px 0px 0px", opacity: 1, transform: "scale(1, 1)"}}>
                                <i className="weui-icon-search"></i>
                                <span>搜索</span>
                            </label>
                        </form>
                        <a href="javascript:" className="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                    </div>
                    <div className="weui-cells searchbar-result" id="searchResult" style={{display: "none"}}>
                        <div className="weui-cell weui-cell_access">
                            <div className="weui-cell__bd weui-cell_primary">
                                <p>实时搜索文本</p>
                            </div>
                        </div>
                        <div className="weui-cell weui-cell_access">
                            <div className="weui-cell__bd weui-cell_primary">
                                <p>实时搜索文本</p>
                            </div>
                        </div>
                        <div className="weui-cell weui-cell_access">
                            <div className="weui-cell__bd weui-cell_primary">
                                <p>实时搜索文本</p>
                            </div>
                        </div>
                        <div className="weui-cell weui-cell_access">
                            <div className="weui-cell__bd weui-cell_primary">
                                <p>实时搜索文本</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});